WebGL-i muutuva varjutamiskiiruse riistvaraline tugi: GPU võimekuse tuvastamine

Muutuva varjutamiskiirusega varjutamine (VRS) on võimas renderdustehnika, mis võimaldab arendajatel kontrollida varjutamiskiirust ekraani erinevates piirkondades. Vähendades varjutamiskiirust aladel, kus detailsus on vähem oluline, võib VRS märkimisväärselt parandada renderduse jõudlust ilma märgatava languseta visuaalses kvaliteedis. See on eriti oluline piiratud ressurssidega seadmete ja nõudlike rakenduste, nagu mängud, simulatsioonid ja virtuaalreaalsus, jaoks.

Kuid VRS on riistvarast sõltuv funktsioon. Kõik GPU-d seda ei toeta ja isegi need, mis toetavad, võivad omada erinevaid võimekusi. Seetõttu on VRS-i riistvaratoe täpne tuvastamine esimene oluline samm selle tehnoloogia tõhusaks kasutamiseks oma WebGL-i rakendustes. See blogipostitus juhendab teid VRS-i toe tuvastamise protsessis ja aitab mõista erinevaid võimekuse tasemeid, millega võite kokku puutuda.

Mis on muutuva varjutamiskiirusega varjutamine (VRS)?

Traditsiooniliselt varjutatakse (st arvutatakse selle värv) iga piksel ekraanil eraldi. See ühtlane varjutamiskiirus võib olla raiskav, kuna mõned ekraani alad ei pruugi nõuda nii suurt täpsust. Näiteks madala kontrastsusega või kiire liikumisega piirkondi saab sageli varjutada madalama kiirusega, ilma et see oluliselt mõjutaks tajutavat visuaalset kvaliteeti.

VRS võimaldab arendajatel määrata ekraani erinevatele piirkondadele erinevad varjutamiskiirused. Tavaliselt tehakse seda ekraani jaotamisega paanideks või plokkideks ja igale paanile varjutamiskiiruse määramisega. Madalam varjutamiskiirus tähendab, et GPU varjutab selles paanis vähem piksleid, vähendades seeläbi renderdamise töökoormust.

Tavaliselt on olemas kaks peamist VRS-i tüüpi:

• Jäme pikslivarjutus (CPS): See VRS-i tüüp võimaldab teil määrata varjutamiskiiruse paanipõhiselt. Paani suurus on tavaliselt väike, näiteks 8x8 või 16x16 pikslit. CPS on suhteliselt lihtne ja tõhus VRS-i vorm.
• Sisupõhine adaptiivne varjutus (CAS): See arenenum VRS-i vorm kohandab dünaamiliselt varjutamiskiirust stseeni sisu põhjal. Näiteks kõrge detailsusega või liikumisega alasid võidakse varjutada kõrgema kiirusega, samas kui madala detailsusega või staatilise sisuga alasid võidakse varjutada madalama kiirusega. CAS nõuab stseeni keerukamat analüüsi, kuid see võib pakkuda veelgi suuremat jõudluse kasvu.

VRS-i kasutamise eelised WebGL-is

VRS-i rakendamine oma WebGL-i rakendustes pakub mitmeid olulisi eeliseid:

• Parem jõudlus: Vähendades varjutamiskiirust vähem kriitilistes piirkondades, võib VRS oluliselt vähendada renderdamise töökoormust, mis toob kaasa kõrgemad kaadrisagedused ja sujuvama jõudluse, eriti madalama klassi seadmetes.
• Pikem aku tööiga: Mobiilseadmete ja sülearvutite puhul võib renderdamise töökoormuse vähendamine tähendada pikemat aku tööiga, mis võimaldab kasutajatel teie rakendusi kauem nautida.
• Parem visuaalne kvaliteet (mõnel juhul): Kuigi see võib tunduda vastuoluline, võib VRS mõnikord parandada visuaalset kvaliteeti, võimaldades teil eraldada rohkem renderdamisressursse visuaalselt olulistele aladele. Näiteks võite vähendada varjutamiskiirust taustal ja kasutada säästetud ressursse esiplaani varjutamiskiiruse suurendamiseks, mille tulemuseks on teravamad ja detailsemad esiplaani objektid.
• Skaleeritavus: VRS võimaldab teie rakendusel paremini skaleeruda erinevate riistvarakonfiguratsioonide vahel. Kõrgklassi GPU-del saate kasutada kõrgemat varjutamiskiirust maksimaalse visuaalse kvaliteedi saavutamiseks, samas kui madalama klassi GPU-del saate kasutada madalamat varjutamiskiirust vastuvõetava jõudluse säilitamiseks.

VRS-i riistvaratoe tuvastamine WebGL-is

Enne kui saate hakata VRS-i oma WebGL-i rakenduses kasutama, peate kindlaks tegema, kas kasutaja GPU seda toetab. See hõlmab vajalike WebGL-i laienduste olemasolu kontrollimist.

1. Laienduse `ANGLE_variable_rate_shading` kontrollimine

Peamine laiendus, mis võimaldab VRS-i WebGL-is, on `ANGLE_variable_rate_shading`. Saate selle olemasolu kontrollida WebGL-i konteksti meetodiga `getExtension()`:

            const gl = canvas.getContext('webgl2');
if (!gl) {
  console.error('WebGL 2 ei ole toetatud.');
  return;
}

const vrsExtension = gl.getExtension('ANGLE_variable_rate_shading');

if (vrsExtension) {
  console.log('Muutuva varjutamiskiirusega varjutamine on toetatud!');
} else {
  console.log('Muutuva varjutamiskiirusega varjutamine ei ole toetatud.');
}

            

              
                Copy
              
            
          

Oluline märkus: Laiendus `ANGLE_variable_rate_shading` on ANGLE (Almost Native Graphics Layer Engine) projekti pakutav laiendus. ANGLE-it kasutavad paljud brauserid WebGL-i kutsete tõlkimiseks erinevate platvormide natiivsetesse graafika API-desse (nt Direct3D Windowsis, Metal macOS-is ja iOS-is, Vulkan Androidis). Seetõttu näitab selle laienduse olemasolu, et aluseks olev graafikadraiver ja riistvara toetavad VRS-i, isegi kui natiivne WebGL-i implementatsioon ei paku VRS-i funktsionaalsust otse.

2. VRS-i võimekuste uurimine

Kui olete kinnitanud, et laiendus `ANGLE_variable_rate_shading` on saadaval, peate uurima VRS-i implementatsiooni spetsiifilisi võimekusi. Laiendus pakub mitmeid konstante ja meetodeid, mis võimaldavad teil neid võimekusi pärida.

a. Toetatud varjutamiskiirused

Laiendus määratleb konstantide kogumi, mis esindavad toetatud varjutamiskiirusi. Need konstandid on kahe astmed ja näitavad, mitu pikslit varjutatakse ühe fragmendi kohta.

• `gl.SHADING_RATE_1X1_PIXELS`: Varjuta iga piksel (1x1).
• `gl.SHADING_RATE_1X2_PIXELS`: Varjuta iga teine piksel horisontaalselt (1x2).
• `gl.SHADING_RATE_2X1_PIXELS`: Varjuta iga teine piksel vertikaalselt (2x1).
• `gl.SHADING_RATE_2X2_PIXELS`: Varjuta iga teine piksel mõlemas suunas (2x2).
• `gl.SHADING_RATE_4X2_PIXELS`: Varjuta iga neljas piksel horisontaalselt ja iga teine piksel vertikaalselt (4x2).
• `gl.SHADING_RATE_2X4_PIXELS`: Varjuta iga teine piksel horisontaalselt ja iga neljas piksel vertikaalselt (2x4).
• `gl.SHADING_RATE_4X4_PIXELS`: Varjuta iga neljas piksel mõlemas suunas (4x4).

Et määrata, milliseid varjutamiskiirusi GPU tegelikult toetab, saate kasutada laienduse meetodit `getSupportedShadingRates()`. See meetod tagastab tõeväärtuste massiivi, kus iga element näitab, kas vastav varjutamiskiirus on toetatud. Elementide järjekord vastab ülaltoodud konstantide järjekorrale.

            if (vrsExtension) {
  const supportedShadingRates = vrsExtension.getSupportedShadingRates();

  console.log('Toetatud varjutamiskiirused:');
  console.log('  1x1: ' + supportedShadingRates[0]);
  console.log('  1x2: ' + supportedShadingRates[1]);
  console.log('  2x1: ' + supportedShadingRates[2]);
  console.log('  2x2: ' + supportedShadingRates[3]);
  console.log('  4x2: ' + supportedShadingRates[4]);
  console.log('  2x4: ' + supportedShadingRates[5]);
  console.log('  4x4: ' + supportedShadingRates[6]);
}

            

              
                Copy
              
            
          

Uurides massiivi `supportedShadingRates`, saate kindlaks teha, milliseid varjutamiskiirusi saate oma rakenduses ohutult kasutada.

b. Varjutamiskiiruse kombineerijate arv

Laienduse omadus `shadingRateCombinerCount` näitab, mitu varjutamiskiiruse kombineerijat GPU toetab. Varjutamiskiiruse kombineerijad võimaldavad teil kombineerida mitut varjutamiskiiruse teabe allikat, et saada lõplik varjutamiskiirus. Mida rohkem kombineerijaid on saadaval, seda paindlikumalt saate varjutamiskiirust kontrollida.

            if (vrsExtension) {
  const shadingRateCombinerCount = vrsExtension.shadingRateCombinerCount;
  console.log('Varjutamiskiiruse kombineerijate arv: ' + shadingRateCombinerCount);
}

            

              
                Copy
              
            
          

Tüüpilised väärtused `shadingRateCombinerCount` jaoks on 1 või 2. Väärtus 0 näitab, et varjutamiskiiruse kombineerijaid ei toetata.

c. Varjutamiskiiruse pildi tugi

Varjutamiskiiruse pilt (`shadingRateImage`) on tekstuur, mis võimaldab teil määrata varjutamiskiiruse paanipõhiselt. Laiendus pakub konstanti `gl.SHADING_RATE_IMAGE_OES`, mis tähistab varjutamiskiiruse pildi tekstuuri sihtmärki. Et kontrollida, kas `shadingRateImage` on toetatud, pärige limiit `MAX_FRAGMENT_UNIFORM_VECTORS`. Kui saadaolevate fragmendi ühtsete vektorite arv on piisav, toetab draiver tõenäoliselt `shadingRateImage` funktsiooni. Kui maksimaalne arv on väga madal, ei ole funktsioon tõenäoliselt toetatud.

Kuigi `shadingRateImage` on standardne viis jämeda pikslivarjutuse teostamiseks, võivad VRS-i riistvaralised implementatsioonid selle ära jätta ja see tuleks tuvastada käitusajal.

3. Toetamata VRS-i käsitlemine

Kui laiendus `ANGLE_variable_rate_shading` pole saadaval või kui toetatud varjutamiskiirused on piiratud, peaksite sujuvalt üle minema standardsele renderdusteele. See võib hõlmata kõrgema varjutamiskiiruse kasutamist või VRS-i täielikku keelamist. On oluline vältida VRS-ile tuginemist, kui see pole korralikult toetatud, kuna see võib põhjustada renderdusvigu või jõudlusprobleeme.

Näide: VRS-i tuvastamine ja kasutamine WebGL-i rakenduses

Siin on täielikum näide, mis demonstreerib, kuidas tuvastada VRS-i tuge ja kasutada seda varjutamiskiiruse reguleerimiseks lihtsas WebGL-i rakenduses:

            
// Hangi WebGL2 kontekst
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl2');

if (!gl) {
  console.error('WebGL 2 ei ole toetatud.');
  // Kasuta alternatiivset renderdusteed ilma VRS-ita
  return;
}

// Hangi ANGLE_variable_rate_shading laiendus
const vrsExtension = gl.getExtension('ANGLE_variable_rate_shading');

if (!vrsExtension) {
  console.log('Muutuva varjutamiskiirusega varjutamine ei ole toetatud.');
  // Kasuta alternatiivset renderdusteed ilma VRS-ita
  return;
}

// Kontrolli toetatud varjutamiskiirusi
const supportedShadingRates = vrsExtension.getSupportedShadingRates();

// Määra madalaim toetatud varjutamiskiirus (v.a 1x1)
let lowestShadingRate = gl.SHADING_RATE_1X1_PIXELS; // Vaikeväärtus on 1x1
if (supportedShadingRates[1]) {
  lowestShadingRate = gl.SHADING_RATE_1X2_PIXELS;
} else if (supportedShadingRates[2]) {
  lowestShadingRate = gl.SHADING_RATE_2X1_PIXELS;
} else if (supportedShadingRates[3]) {
  lowestShadingRate = gl.SHADING_RATE_2X2_PIXELS;
} else if (supportedShadingRates[4]) {
  lowestShadingRate = gl.SHADING_RATE_4X2_PIXELS;
} else if (supportedShadingRates[5]) {
  lowestShadingRate = gl.SHADING_RATE_2X4_PIXELS;
} else if (supportedShadingRates[6]) {
  lowestShadingRate = gl.SHADING_RATE_4X4_PIXELS;
}

console.log('Madalaim toetatud varjutamiskiirus: ' + lowestShadingRate);

// Määra varjutamiskiirus kindlale piirkonnale (nt tervele ekraanile)
// Tavaliselt hõlmaks see varjutamiskiiruse pildi loomist ja selle sidumist vastava tekstuuriühikuga.
// Järgnev on lihtsustatud näide, mis määrab varjutamiskiiruse ainult globaalselt.

// Eeldades, et teil on programm ja olete joonistamas...

function drawScene(){
  // Seo vastav kaadripuhver (vajadusel)

  // Kutsu laienduse funktsioon varjutamiskiiruse määramiseks (lihtsustatud näide)
  // Päris rakenduses hõlmaks see varjutamiskiiruse pildi seadistamist.
  //vrsExtension.setShadingRate(lowestShadingRate);  //See on hüpoteetiline funktsioon ja ei tööta, see on siin näitena, mida see teeks.

  // Joonista oma stseen
  //gl.drawArrays(...);
}

// Renderdustsükkel
function render() {
  // ... uuenda oma stseeni ...
  drawScene();
  requestAnimationFrame(render);
}

requestAnimationFrame(render);


            

              
                Copy
              
            
          

Olulised kaalutlused:

• Varjutamiskiiruse pilt: Ülaltoodud näide on lihtsustatud illustratsioon. Reaalses olukorras looksite tavaliselt varjutamiskiiruse pildi (tekstuuri) ja seoksite selle tekstuuriühikuga. See pilt sisaldaks varjutamiskiiruse väärtusi iga ekraani paani kohta. Seejärel kasutaksite sobivaid WebGL-i funktsioone, et seda pilti oma fragmendivarjuris proovida ja vastavat varjutamiskiirust rakendada. Varjutamiskiiruse pildi loomise ja kasutamise üksikasjad ei kuulu selle sissejuhatava blogipostituse raamidesse, kuid neid käsitletakse tulevastes artiklites.
• Jõudluse mõõtmine: On ülioluline hoolikalt mõõta VRS-i mõju teie rakenduse jõudlusele. Kuigi VRS võib sageli jõudlust parandada, võib see lisada ka lisakoormust varjutamiskiiruse pildi haldamise ja fragmendivarjuris vajalike arvutuste tegemise tõttu. Kasutage WebGL-i jõudluse analüüsi tööriistu, et määrata oma rakenduse jaoks optimaalsed varjutamiskiirused.

Parimad praktikad VRS-i kasutamiseks WebGL-is

Et VRS-ist oma WebGL-i rakendustes maksimumi võtta, kaaluge järgmisi parimaid praktikaid:

• Eelistage visuaalset kvaliteeti: Varjutamiskiiruste valimisel eelistage visuaalset kvaliteeti jõudlusele. Alustage kõrgema varjutamiskiirusega ja vähendage seda järk-järgult, kuni märkate olulist langust visuaalses kvaliteedis.
• Kasutage sisupõhist adaptiivset varjutust (kui on saadaval): Kui teie GPU toetab sisupõhist adaptiivset varjutust, kasutage seda varjutamiskiiruse dünaamiliseks kohandamiseks stseeni sisu põhjal. See võib pakkuda veelgi suuremat jõudluse kasvu ilma märgatava mõjuta visuaalsele kvaliteedile.
• Arvestage paani suurusega: Paani suurus mõjutab varjutamiskiiruse kontrolli detailsust. Väiksemad paanide suurused võimaldavad täpsemat kontrolli, kuid suurendavad ka varjutamiskiiruse pildi haldamise lisakoormust. Katsetage erinevate paanide suurustega, et leida optimaalne tasakaal täpsuse ja jõudluse vahel.
• Kasutage VRS-i kombinatsioonis teiste optimeerimistehnikatega: VRS on vaid üks tööriist teie optimeerimisarsenalis. Kasutage seda koos teiste tehnikatega, nagu detailsusastme (LOD) skaleerimine, varjestuse eemaldamine ja tekstuuri tihendamine, et saavutada maksimaalne jõudlus.
• Testige erinevatel seadmetel: Testige oma rakendust erinevatel seadmetel, et veenduda, et VRS töötab korrektselt ja pakub oodatud jõudluse kasvu. Erinevatel GPU-del võivad olla erinevad VRS-i võimekused, seega on oluline testida esinduslikul riistvara valimil.

Kokkuvõte

Muutuva varjutamiskiirusega varjutamine on paljulubav tehnika renderdamise jõudluse parandamiseks WebGL-i rakendustes. Tuvastades hoolikalt VRS-i riistvaratoe ja järgides selles blogipostituses kirjeldatud parimaid praktikaid, saate VRS-i abil luua tõhusamaid ja visuaalselt köitvamaid WebGL-i kogemusi. Kuna WebGL areneb edasi, võime oodata veelgi arenenumate VRS-i funktsioonide ja tehnikate kättesaadavaks muutumist, mis annab arendajatele veelgi rohkem võimalusi luua vapustavat ja jõudsat veebipõhist graafikat.

Pidage meeles, et alati tuleb eelistada visuaalset kvaliteeti ja hoolikalt mõõta VRS-i mõju teie rakenduse jõudlusele. Nii toimides saate tagada, et kasutate VRS-i tõhusalt parimate võimalike tulemuste saavutamiseks.